<script setup lang="ts">
import homeFooterCom from '../../components/homeFooterCom.vue'
// import avater1 from "../../assets/home/detail/icon7.png"
import { onMounted, ref } from 'vue';
import type { Ref } from 'vue';
import setting from '../../assets/setting.png'
// import pic1 from '../../assets/home/detail/pic1.png'
// import pic2 from '../../assets/home/detail/pic2.png'
// import pic3 from '../../assets/home/detail/pic3.png'
// import pic4 from '../../assets/home/detail/pic4.png'
// const studentPic: Ref<string[]> = ref([pic1, pic2, pic3, pic4])
import { getCourseList, gethotTeacherMonthList } from '@/api/user';
interface iCourse {
    coursename: string,
    courseteacher: string,
    id: number
}
const courseList: Ref<Array<iCourse>> = ref([])
interface ihotTeach {
    icon: string,
    name: string,
    city: string,
    id: number
}
const hotTeacherMonthList: Ref<Array<ihotTeach>> = ref([])
onMounted(() => {

    getCourseList({}).then(res => {
        console.log(4, res.data.courseList);
        courseList.value = res.data.courseList
    })
    gethotTeacherMonthList({}).then(res => {
        console.log(4, res.data.hotTeacherMonthList);
        hotTeacherMonthList.value = res.data.hotTeacherMonthList
    })
})
import { useUserStore } from '@/stores/user';

const user = useUserStore()
const username = user.username
const avatar = localStorage.getItem('avatar') || ''
console.log('avatar', avatar);

// localStorage.setItem('avatarurl',avatar.)
// const workList = localStorage.getItem('作业') || ''

// const workList2 = JSON.parse(workList)
// console.log('worklist', workList2);
// console.log('Raw work list data:', workList);
// try {
//     const workList2 = JSON.parse(workList);
//     console.log('Parsed worklist', workList2);
// } catch (e) {
//     console.error('Failed to parse JSON:', e);
// }

let workList2: string[] = [];

try {
  const workList = localStorage.getItem('作业') || '[]';  // 确保即使没有数据也能解析
  workList2 = JSON.parse(workList);
  console.log('worklist', workList2);
} catch (e) {
  console.error('解析 JSON 失败:', e);
  workList2 = [];  // 如果解析失败，确保 workList2 是一个空数组
}
</script>
<template>
    <div>

        <div class="blue"> </div>
        <div class="icon">
            <van-image :src="avatar" round class="avater"></van-image>
            <van-image :src="setting" round class="setting" @click="$router.push('/selfsetting')"></van-image>

        </div>
        <p class="middle" style="font-size: 20px;">{{ username }} </p>
        <p class="text middle">悟已往之不谏，知来者之可追。</p>
        <div class="img">
            <section class="wechat">

                <img src="https://cdn7.axureshop.com/demo2023/2246171/images/04-%E7%99%BB%E5%BD%95/%E5%BD%A2%E7%8A%B6_u112.svg"
                    alt="">
            </section>
            <section class="qq">
                <img src="https://cdn7.axureshop.com/demo2023/2246171/images/04-%E7%99%BB%E5%BD%95/%E8%B7%AF%E5%BE%84_u91.svg"
                    alt=""></img>
            </section>
            <section class="wb">
                <img src="https://cdn7.axureshop.com/demo2023/2246171/images/04-%E7%99%BB%E5%BD%95/%E5%BD%A2%E7%8A%B6_u103.svg"
                    alt=""></img>
            </section>



        </div>
        <!-- 作业 课程 关注 -->
        <van-tabs>

            <van-tab title="03 作业">
                <!-- 作业宫格图片 -->
                <div class="studentPic">
                    <van-image v-for="(value, index) in workList2" :key="index" :src="value" class="br"/>
                    <van-empty v-if="workList2.length === 0" description="No Data" />
                </div>
            </van-tab>
        

        <van-tab title="04 课程">
            <div v-for="item in courseList" :key="item.id" class="courselist">
                <!-- <van-card:desc="item.courseteacher" price="2.00"
                    :title="item.coursename" thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg" /> -->
                <div class="left">
                    <van-image width="100" class="br" height="100" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
                </div>
                <div class="right">
                    <p style="font-size: 0.16rem;margin-bottom: 0.1rem">{{ item.coursename }}</p>
                    <p>{{ item.courseteacher }}</p>
                    <p>
                        <van-image style="width: 12px;"
                            src="https://cdn7.axureshop.com/demo2023/2246171/images/11-%E8%AF%BE%E7%A8%8B%E5%88%97%E8%A1%A8-%E8%AE%BE%E8%AE%A1it/%E5%BD%A2%E7%8A%B6_u546.svg">

                        </van-image> <span style="display: inline-block;width: 160px;">5K学员 &#X3000; &#X3000;⭐4.8
                        </span>
                    </p>
                </div>
            </div>
        </van-tab>
        <van-tab title="08 关注">
            <div class="attention" v-for="item in hotTeacherMonthList" :key="item.id">
                <div class="left">
                    <div class="lefticon">
                        <van-image :src="item.icon" round></van-image>
                    </div>
                    <div class="leftinfo">
                        <div class="teachername">{{ item.name }}</div>
                        <div class="teacherip">{{ item.city }}</div>
                    </div>
                </div>
                <div class="right">
                    <van-button type="primary">已关注</van-button>
                </div>
            </div>
        </van-tab>
        </van-tabs>

        <homeFooterCom></homeFooterCom>
    </div>
</template>
<style lang="scss" scoped>
.br{
    border-radius: 5px;
}
.blue {
    background-color: blue;
    width: 100vw;
    height: 30vw;
}

.icon {
    height: 14vw;

    .avater {
        position: absolute;
        top: 15vw;
        left: 38vw;
        width: 100px;
        height: 100px;
    }

    .setting {
        position: absolute;
        top: 10vw;
        right: 8vw;
    }
}



.middle {
    text-align: center;
    margin-bottom: 10px;
}

.img {
    display: flex;
    justify-content: space-evenly;
    width: 60vw;
    align-items: center;
    margin: 10px auto;
}

section {
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;



}

.wechat {
    background-color: green;
}

.qq {
    background-color: pink;
}

.wb {
    background-color: rgb(237, 203, 12);
}

.studentPic {
    width: 100vw;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 5 px;
    box-sizing: border-box;

    padding: 10px;
    .van-image {
        width: 44vw;
        height: 44vw;
        margin-right: 10px;
        margin-bottom: 10px;
        border-radius: 5px;
    }
}

.courselist {
    box-sizing: border-box;
    padding: 2vw 2vw 2vw 4vw;
    display: flex;

    .left {
        width: 100px;
        margin-right: 2vw;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .right {
        flex: 1;

        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
}

.attention {
    display: flex;
    height: 40px;
    // margin-bottom: 14px;
    padding: 10px;

    .left {
        width: 70vw;
        display: flex;

        .lefticon {
            width: 20vww;

            .van-image {
                width: 100%;
                height: 100%;
            }
        }

        .leftinfo {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin-left: 14px;
        }
    }

    .right {
        width: 30vw;

        .van-button {

            float: right;
        }
    }
}
</style>